<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript实现的纵向焦点图片轮换</title>
<link href="css/01.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

#nab {
	float: left;
	font-family: "宋体";
	font-size: 12px;
	margin-top: 5px;
}

.div_xixi {
	background: #fff;
	width: 617px;
	position: relative;
	height: 267px;
	float: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.div_jimg {	margin: 0px; width: 405px; height: 267px}

.div_jimg #a_jimg {display: block; width: 405px; height: 267px}

.div_jimg #bigimg {
	margin: 0px;
	width: 403px;
	height: 265px;
	border: 1px solid #fd8383;
	padding: 0px;
}

.div_jimg .ul_jimg {
	display: block;
	right: 0px;
	margin: 1px;
	width: 225px;
	list-style-type: none;
	position: absolute;
	top: 0px;
	height: 267px;
	padding: 0px;
	background: url(images/bg_j04.jpg) repeat-y right top;
}

.div_jimg .ul_jimg li {
	display: inline;
	float: right;
	overflow: hidden;
	width: 212px;
	cursor: pointer;
	word-break: break-all;
	text-indent: 30px;
	padding-top: 14px;
	white-space: nowrap;
	height: 24px;
	text-overflow: ellipsis
}

.div_jimg .ul_jimg a {position: relative}

.div_jimg .ul_jimg .on {	
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_j05.png',sizingMethod='scale'); 
	width: 225px;
	color: blue;
	text-indent: 43px;
	position: static;	
}

.div_jimg .ul_jimg .on a {font-weight: bold; color: blue}
-->
</style>

</head>

<body>
<div id="nab">
<table id="pictable" style="display: none">
  <tbody>
  <tr>
    <td><img src="images/亚丁.jpg" border="0" /></td>
    <td>极致美景 中国七大秋色斑斓地 </td>
    <td>#</td>
  </tr>
  <tr>
    <td><img src="images/云南大理.jpg" border="0" /></td>
    <td>畅游大理  体味民族风情</td>
    <td>#</td>
  </tr>
  <tr>
    <td><img src="images/桂林初冬.jpg" border="0" /></td>
    <td>桂林初冬 浓妆淡抹最佳处</td>
    <td>http://www.lanrentuku.com/</td>
  </tr>
  <tr>
    <td><img src="images/新疆.jpg" border="0" /></td>
    <td>新疆库尔勒：铁关西天涯极目少行客</td>
    <td>#</td></tr>
  <tr>
    <td><img src="images/兴安灵渠.jpg" border="0" /></td>
    <td>历史遗产：兴安灵渠</td>
    <td>#</td>
  </tr>
  <tr>
    <td><img src="images/内蒙古.jpg" border="0" /></td>
    <td>神秘美丽的内蒙古草原</td>
    <td>#</td>
  </tr>
  <tr>
    <td><img src="images/陕西.jpg" width="404" height="327" border="0" /></td>
    <td>回归自然 感受另类风情</td>
    <td>#</td></tr>
  </tbody>
</table>

<div class="div_xixi">
<script language="javascript" type="text/javascript">
<!--
window.onload = function(){
	playit();
 }
 
var currslid = 0;
var slidint;
var picarry = {};
var lnkarry = {};
var ttlarry = {};
var t=document.getElementById("pictable");
var num=t.rows.length;
for(var i=0;i<num;i++){
  try{
	  picarry[i]=t.rows[i].cells[0].childNodes[0].src;
	  ttlarry[i]=t.rows[i].cells[1].innerHTML;
	  lnkarry[i]=t.rows[i].cells[2].innerHTML; 
   }
	catch(e){
  }
}
 
function playit(){
	slidint = setTimeout(playnext,2500);
 }
 
function playnext(){
	if(currslid==6){
		currslid = 0;
	}
	else{
		currslid++;
	};
	setfoc(currslid);
	playit();
} 

function setfoc(id){
  document.getElementById("bigimg").src = picarry[id];
  document.getElementById("a_jimg").href = lnkarry[id];
  if (id==4) {
	  document.getElementById("a_jimg").style.background = 'url('+picarry[0]+')'	
	}
  else {
	  document.getElementById("a_jimg").style.background = 'url('+picarry[id+1]+')'
	}
  currslid = id;
  for(i=0;i<7;i++){
	  document.getElementById("li_jimg"+i).className = "li_jimg";
  };
  document.getElementById("li_jimg"+id).className ="li_jimg on";

  var borserInfo=navigator.userAgent.toLowerCase();  //判断当前用户所使用浏览器的类型
  if(/msie/.test(borserInfo))
  {
	document.getElementById("bigimg").style.visibility = "hidden";
	document.getElementById("bigimg").filters[0].Apply();
	document.getElementById("bigimg").filters[0].transition=23;
	if (document.getElementById("bigimg").style.visibility == "visible") {
	  document.getElementById("bigimg").style.visibility = "hidden";
	}
	else {
	  document.getElementById("bigimg").style.visibility = "visible";
	}
	document.getElementById("bigimg").filters[0].Play();
  }
  stopit();
 }

function stopit(){
	clearTimeout(slidint);
 }
 
document.write(
"<div class='div_jimg'>"
	+"<a class='a_jimg' id='a_jimg' href='"+lnkarry[0]
	+"' title='' style='background:url("+picarry[1]+")' target='_blank'>"
	+"<img id='bigimg' style='filter:RevealTrans (duration='1',transition='23'); visibility:visible;' alt='' src='"+picarry[0]
	+"' \/><\/a>"
  +"<ul class='ul_jimg'>"
	+"<li class='li_jimg on' id='li_jimg0' onmouseover='setfoc(0)' onmouseout='playit()'>"
	+"<a href='"+lnkarry[0]+"' target='_blank' class='img'>"+ttlarry[0]+"<\/a><\/li>"
	+"<li class='li_jimg' id='li_jimg1' onmouseover='setfoc(1)' onmouseout='playit()'>"
	+"<a href='"+lnkarry[1]+"' target='_blank' class='img'>"+ttlarry[1]+"<\/a><\/li>"
	+"<li class='li_jimg' id='li_jimg2' onmouseover='setfoc(2)' onmouseout='playit()'>"
	+"<a href='"+lnkarry[2]+"' target='_blank' class='img'>"+ttlarry[2]+"<\/a><\/li>"
	+"<li class='li_jimg' id='li_jimg3' onmouseover='setfoc(3)' onmouseout='playit()'>"
	+"<a href='"+lnkarry[3]+"' target='_blank' class='img'>"+ttlarry[3]+"<\/a><\/li>"
	+"<li class='li_jimg' id='li_jimg4' onmouseover='setfoc(4)' onmouseout='playit()'>"
	+"<a href='"+lnkarry[4]+"' target='_blank' class='img'>"+ttlarry[4]+"<\/a><\/li>"
	+"<li class='li_jimg' id='li_jimg5' onmouseover='setfoc(5)' onmouseout='playit()'>"
	+"<a href='"+lnkarry[5]+"' target='_blank' class='img'>"+ttlarry[5]+"<\/a><\/li>"
	+"<li class='li_jimg' id='li_jimg6' onmouseover='setfoc(6)' onmouseout='playit()'>"
	+"<a href='"+lnkarry[6]+"' target='_blank' class='img'>"+ttlarry[6]+"<\/a><\/li>"
  +"<\/ul>"
+"<\/div>");
-->
</script>
</div>
</div>
</body>
</html>





